<template lang="pug">
  .foot-menu.clearfix.animated.bounceInUp(
    v-if="getMenuStatus",
    ref="footWrap",
    :class="{'active': getMenuStyleObj}",
    @touchmove="handleDragPrevent")
    Scene
    //- 系统菜单
    .foot-menu-ulall
      ul.foot-menu-list.menu-system
        li.menu-item.omit(@click="showScene")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-scene(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 场景
      ul.foot-menu-list.menu-system
        li.menu-item(@click="goHome", v-if="homeFlag")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-home(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 主页

        li.menu-item.omit(
          v-for="(item, index) in menuDataList",
          :key="index",
          :content="item.isActive ? item.act_title : item.dis_title",
          @click="handleSytemMenuItem(item, index)")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont(v-if="item.isActive", :class="item.active_icon", :style="getColorStyle")
            i.iconfont(v-else, :class="item.icon", :style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") {{item.type_id === 'praise'? getPraiseCount : item.title}}

    //- 导航菜单
    ul.bottom-menu-list.tac
      .mask(v-if="isShowSubmenu", @touchstart="hideSubMenu")
      li.bottom-menu-item.pos-r(v-if="getBottomMenu", v-for="(item, index) in getBottomMenu", :key="index", @click="handleBtMenu(item, index)")
        a(href="javascript:;", :class="{'has-icon': item.children && item.children.length > 0}")
          .bottom-menu-text.omit {{item.title}}
            van-icon(name="wap-nav", v-if="item.children && item.children.length > 0")

        ul.submenu(v-if="item.children && item.children.length && curIndex == index && isShowSubmenu")
          li.item(v-for="(item, index) in item.children", :key="index", @click.stop="handleSubMenu(item, index)")
            a.text.omit(href="javascript:;") {{item.title}}

    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
</template>

<script>
import wx from './menu-wx-mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [wx],
  computed: {
    ...mapGetters([
      'praiseCount'
    ]),
    getPraiseCount() {
      return this.praiseCount > this.countUnit
        ? Number(this.praiseCount/this.countUnit).toFixed(1) + 'w'
        : this.praiseCount
          ? this.praiseCount
          : 0
    },
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.theme-app-d
  .foot-menu
    .foot-menu-ulall
      display flex
      justify-content space-between
      .foot-menu-list
        flex-cnter()
        padding: 10px 0
        box-sizing: border-box
        color: $white
        .menu-item
          flex: 1
          max-width: 46px
          align-self: center
          display: inline-block
          text-align: center
          cursor: pointer
          .menu-text
            font-size: 10px
            margin-top: 5px
          .menu-icon
            display: inline-block
            width: 28px
            height: 28px
            line-height: 28px
            border-radius: 50%
            transition: all 1s
            background-color: $white
            i
              vertical-align: middle
              color: $theme-classic-color
      .foot-menu-list:nth-child(1)
        width 20%
        justify-content flex-start
      .foot-menu-list:nth-child(2)
        width 80%
        justify-content flex-end
    .bottom-menu-list
      flex-cnter()
      background-color: $white

      .mask
        position: fixed
        top: 0
        left: 0
        width: 100vw
        height: calc(100vh - 35px)

      .bottom-menu-item
        flex: 1
        line-height: 36px
        color: $black
        &:not(:last-child)
          bdr-1px($gray)
        &:nth-of-type(1)
          .submenu
            transform: translate(2px, -100%)
        &:last-child
          .submenu
            transform: translate(-2px, -100%)
        & > a
          display: block
          padding: 5px
          max-width: 80px
          box-sizing: border-box
          margin: 0 auto
          &.has-icon
            padding-left: 15px
        .van-icon
          position: absolute
          top: 50%
          left: 4px
          transform: translateY(-50%)
        .bottom-menu-text
          font-size: 12px
          color: $black-light

        .submenu
          position: absolute
          top: -10px
          width: 100%
          border-radius: 4px
          background-color: $white
          transform: translateY(-100%)
          trangle-bottom(10px, $white)
          li
            height = 35px
            height: height
            line-height: height
            overflow: hidden
            &:not(:last-child)
              bdb-1px($gray)
            a
              font-size: 12px
              color: $black-light
              height: height

</style>
